<template>
    <a-alert type="success" banner >
        <template #icon>
            <LoginOutlined style="color:#eb2f96" v-if="props.relaClassify == CONSTANTS.relaClassify.INPUT"/>
            <LogoutOutlined style="color:#eb2f96" v-if="props.relaClassify == CONSTANTS.relaClassify.OUTPUT" />
            <SettingFilled style="color:#eb2f96" v-if="props.relaClassify == CONSTANTS.relaClassify.TOOL"/>
            <StarTwoTone two-tone-color="#eb2f96" v-if="props.relaClassify == CONSTANTS.relaClassify.SUB"/>
        </template>
        <template #message><b>{{title}}</b></template>
        <template #description>

          <a-empty v-if="!relaList || relaList.length==0"></a-empty>
<!-- <div v-if="!relaList || relaList.length==0">无数据</div> -->
            <span v-for="pmpItem in relaList" :key="`pmpItemId_${pmpItem.id}`">
            <ClassifyIcon :classify="pmpItem.supClassify" short/><PmpItemName :id="pmpItem.supId"/> <a-divider type="vertical"></a-divider>
            </span>
        </template>
    </a-alert>
</template>

<script setup>
/**
 * 该组件展示注PmpItem引用的子PmpItem的列表
 * 
 */
import { LoginOutlined, LogoutOutlined,SettingFilled, StarTwoTone } from '@ant-design/icons-vue'
import { ref,onMounted,watch } from 'vue'
import pmpHooks from '@/hooks/PmpHooks.js'
import CONSTANTS from '@/constants/Constants.js'

import ClassifyIcon from '@/components/ClassifyIcon.vue'
const relaList = ref([])
const title = ref('')
const pmpItem = ref({})
const props = defineProps({
    // pmpItem的id
  id: {
    type: String,
    default: () => '',
  },
  // 关系类型 INPUT OUTPUT TOOL SUB,参见后端 com.thd.pmp.constants.RelaClassify.class 或 Constants.js中relaClassify
  relaClassify: {
    type: String,
    default: CONSTANTS.relaClassify.SUB,
  }
})


onMounted(async () => {
    loadPageData()
//   data.value = pmpHooks.loadPmpDictDetail(props.id)
//   title.value = pmpHooks.loadPmpDictDetail(props.id).nameCn
})

watch(
  () => props.id,
  async (v) => {
    loadPageData()
    // data.value = pmpHooks.loadPmpDictDetail(v)
    // title.value = pmpHooks.loadPmpDictDetail(v).nameCn
  }
)

async function loadPageData(){


    
    const pmpItemRes = await pmpHooks.queryPmpItemById(props.id);
    // alert(JSON.stringify(res))
    pmpItem.value = pmpItemRes.result;

    if(CONSTANTS.relaClassify.SUB == props.relaClassify){
        title.value = '相关词中包含[' + pmpItem.value.nameCn+ ']的元素'
    }
    if(CONSTANTS.relaClassify.INPUT == props.relaClassify){
        title.value = '输入中包含[' + pmpItem.value.nameCn+ ']的基础过程'
    }
    if(CONSTANTS.relaClassify.OUTPUT == props.relaClassify){
        title.value = '输出中包含[' + pmpItem.value.nameCn+ ']的基础过程'
    }
    if(CONSTANTS.relaClassify.TOOL == props.relaClassify){
        title.value = '技术及工具中包含[' + pmpItem.value.nameCn+ ']的基础过程'
    }
    
    

    const res = await pmpHooks.queryReferenceList(props.id,props.relaClassify);
    // alert(JSON.stringify(res))
    relaList.value = res.result;
}



</script>

<style>

</style>